<template>
  <div>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>留言管理</el-breadcrumb-item>
        <el-breadcrumb-item>新闻稿编辑</el-breadcrumb-item>
      </el-breadcrumb>

      <el-row :span=20>
        <el-col :span="8">
          <quill-editor 
            class="title"
            v-model="journalism.title" 
            ref="title" 
            :options="titleOption">
          </quill-editor>
        </el-col>

        <el-col :span="8">
          <div class="demo-input-suffix">
            图片链接 : 
            <el-input
              class="iconURL"
              v-model="journalism.icon">
            </el-input>
          </div>
        </el-col>

        <el-col :span="4">
          <quill-editor 
            class="author"
            v-model="journalism.author" 
            ref="author" 
            :options="authorOption">
          </quill-editor>
        </el-col>

        <el-col :span="4">
          <el-date-picker
            class="date"
            v-model="journalism.time"
            type="datetime"
            placeholder="选择日期">
          </el-date-picker>
        </el-col>
      </el-row>

      <quill-editor
        class="article"
        v-model="journalism.article"
        ref="article" 
        :options="articleOption">
      </quill-editor>

      <el-button type="primary" @click="editJournalism">确认修改</el-button>

    </el-card>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  components: {
    quillEditor
  },
  created() {
    // 获取到路径上的 id
    this.queryInfo.id = this.$route.query.id
    this.getJournalismById()
  },
  data() {
    return {
      id: 0,
      // 标题输入设置
      titleOption: {
        placeholder: "请在这里输入标题",
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike']
          ]
        }
      },
      // 图片设置
      iconOption: {
        placeholder: '请在这里插入图片',
        modules: {
          toolbar: [
            ['image']
          ]
        }
      },
      // 作者输入设置
      authorOption: {
        placeholder: "请在这里输入作者",
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike']
          ]
        }
      },
      // 内容输入设置
      articleOption: {
        placeholder: "请在这里输入文章内容"
      },
      queryInfo: {
        id: 0
      },
      journalism: {
        id: 0,    
        author: '',
        title: '',
        article: '',
        time: ''
      },
    }
  },
  methods: {
    async getJournalismById() {
      const { data: res } = await this.$http.post('getJournalismById', this.queryInfo)
      if (res == null) return this.$message.error('获取文章内容失败')
      this.journalism = res
      this.$message.success('获取文章内容成功')
    },
    // 正则表达式，删除自动添加的标签，但文字的样式也会被删除
    delHtmlTag(str) {
      if (str != null) {
        return str.replace(/<[^>]+>/g,"");
      }
    },
    // 发送修改新闻稿的请求
    async editJournalism() {
      this.journalism.id = this.queryInfo.id
      this.journalism.title = this.delHtmlTag(this.journalism.title)
      this.journalism.author = this.delHtmlTag(this.journalism.author)
      const { data: res } = await this.$http.post('updateJournalismById', this.journalism)
      if (res != 'success') return this.$message.error('新闻稿修改失败')
      this.$message.success('新闻稿修改成功')
      this.$router.push('/journalism')
    },
  }
}
</script>

<style scoped>
.quill-editor {
  margin-bottom: 20px;
}

.el-date-editor {
  margin-bottom: 20px;
}

.author, .title, .icon {
  margin-right: 20px;
}

.article {
  height: 500px;
}

.date {
  margin-top: 20px;
}

.el-button {
  display: block;
  margin: 65px 50% 0px 50%;
}

.demo-input-suffix {
  margin-top: 12px;
  margin-right: 20px;
}

.iconURL {
  margin-top: 10px;
}
</style>